/*eslint-disable*/
import { useState } from 'react';
import NewMoney from 'components/NewMoney'
import NewClock from './NewClock';
import NewTodoList from './NewTodolist';
import styled from 'styled-components';
import nowTime from '../nowTime';
import useMoney from '../useMoney';
import useTodolist from "useTodolist";
import useTomato from 'useTomato';

const Wrapper =styled.div`
    position:fixed;
    width:100vw;
    height:100vh;
    z-index:100;
    background: rgba(122, 119, 119, 0.5);
    top:0;
    right:0;
    display:flex;
    justify-content: center;
    align-items:center;
    >.home-new{
        display:flex;
        flex-direction:column;
        background:white;
        width:85%;
        border-radius: 10px;
        >.newOptionTitle{
            display:flex;
            align-items:center;
            justify-content:center;
            background-color: rgba(235, 231, 231, 1);
            >.title{
                font-size:18px;
                padding:10px;
                margin-top:5px;
                >.yes{
                    color:#209e74;
                    font-weight:700;
                }
            }  
        }  
    }
`
type UserTime={
    note:string,
    time:string,
}
type money={
    theme:string,
    note:string,
    money:number,
}
type TProp={
    onChange:()=>void
}
const NewOption=(Props:TProp)=>{
    const [nowTitle,setNowTitle]=useState('待办事项')
    const {addMoney} = useMoney();
    const{addTodolist}=useTodolist()
    const{addTomato}=useTomato()
    
    const [newOption,setNewOption]=useState([
        {title:'待办事项',content:<NewTodoList onChange={(note)=>{addTodolist(note);Props.onChange()}}/>},
        {title:'记账',content:<NewMoney onChange={(selected?:money)=>{addMoney(nowTime(),selected);Props.onChange()}} />},
        {title:'番茄时钟',content:<NewClock onChange={(userTime:UserTime | undefined)=>{addTomato(userTime);Props.onChange()}} />},
    ])
   
    return (
        <Wrapper >
            <div className='home-new'>
                <div  className='newOptionTitle'>
                    {newOption.map((items)=>{
                        return(
                            <div className='title' key={items.title} onClick={()=>{setNowTitle(items.title)}}>
                                <div className={items.title===nowTitle? 'yes':'no'}>{items.title}</div>
                            </div>
                        )
                    })} 
                </div>
                <hr/>
                <div className='content'>
                    {newOption.map((items)=>{
                        if(items.title===nowTitle){
                            return(
                                <div key={items.title}>{items.content}</div>
                            )
                        } 
                    })}
                </div>        
            </div> 
        </Wrapper>
    )
}

export default NewOption;